<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>{{.WEBSITE}}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ����3��meta��ǩ*����*������ǰ�棬�κ��������ݶ�*����*������� -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/favicon.ico">

    <script type="text/javascript" src="/static/public/jquery-2.0.0.min.js"></script>
    <!-- Bootstrap core CSS 修改了bootstrap.min.css源文件里的pre-scrollable(垂直滚动条)部分，改高度340为800px-->

    <link href="/static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <link href="/static/video-js/video-js.min.css" rel="stylesheet">
    <script src="/static/video-js/video.min.js"></script>
    <script>
        videojs.options.flash.swf = "/static/video-js/video-js.swf";
    </script>
    <style type="text/css">
        .div_center {
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
            /*必须要设置宽度才能够居中*/
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row clearfix vertical-middle-sm">
            <!-- text-center-->
            <div class="col-md-2 column">
                <img width="150px" height="150px" src="/static/img/ccnu1.png" />
            </div>
            <div class="col-md-4 column text-left" style="vertical-align: middle !important;">
                <H1><span>直播测试</span></H1>
            </div>
            <div class="col-md-5 column">

            </div>

        </div>
        <hr/>
    </div>
    <div class="container">
        <div class="row clearfix">
            <div id="toolbar" class="btn-group" onclick="fullscreen()">
                <button id="btn_add" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>全屏播放
				</button>
            </div>
            <div id="toolbar" class="btn-group" onclick="dcewm">
                <button id="btn_scewm" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
					<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>手机播放二维码
				</button>
            </div>

            <!--div id="toolbar" class="btn-group" onclick="">
                <button id="btn_add" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-hd-video" aria-hidden="true"></span>高清
				</button>
            </div>
            <div id="toolbar" class="btn-group" onclick="">
                <button id="btn_add" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-sd-video" aria-hidden="true"></span>标清
				</button>
            </div-->
        </div>
    </div>
    <div style="height:10px;"></div>
    <div class="container">
        <div class="row clearfix">
            <div class="div_center">
                <!--
                    width="900px" height="100%" 
                    controls 表示自动添加播放控件。
                    加上 preload="auto" 可以让页面加载完成后立即开始加载视频，如果设置为 preload="meta" 则只加载视频元数据。 
                -->
                <video oncanplay="Oncanplay()" id="my-player" class="video-js vjs-big-play-centered" preload="auto" poster="/static/img/ccnu1.png" data-setup='{"techorder":["flash"]}'>
                    <source src="rtmp://c.kjdll.com/live/ch1" type="rtmp/mp4"></source>
                    <!--实测不支持：source src="http://c.kjdll.com:8888/hls/ch1.m3u8" type="application/x-mpegURL"></source-->
                    <!--source src="/static/1.mp4" type="video/mp4"></source>
                    <source src="/static/2.mp4" type="video/webm"></source>
                    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source-->
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                    </a>
                    </p>
                </video>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">手机播放请扫码</h4>
                </div>
                <div class="modal-body">
                    <img src="/api/v1/qrcode" alt="手机播放请扫码" />
                </div>
                <div class="modal-footer">
                </div>

            </div>
        </div>
    </div>


    <hr/>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <p class="text-center">
                    <em>Hi</em> 前台/后台： <strong>熊义</strong> ，QQ:34512664 。
                </p>
            </div>
        </div>
    </div>




    <script>
        function Oncanplay() {
            alert("Oncanplay");
        }

        function fullscreen() {
            //全屏
            //alert("全屏！");
            //$player.pause(); //暂停播放，可以用
            //$('.vjs-play-control').click();   //暂停继续按钮，可以用
            $('.vjs-fullscreen-control').click(); //全屏
        };

        function phonePlay() {
            //转到手机播放
            location.href = "http://c.kjdll.com:8888/hls/ch1.m3u8";
        };
    </script>

    <script>
        //Global Defaults
        videojs.options.autoplay = true;
        //var player = videojs('my-player');
        var $player = videojs('my-player', {
            controls: false, //自动添加播放控件
            autoplay: true,
            preload: 'auto',
            loop: false, //自动循环,假如Html5 中的video元素添加了 loop 属性(重复播放),那么  story_player.on("ended",function(){ alert("video is done");});将执行不到。
            width: "1000px",
            height: "600px",
            controlBar: {
                muteToggle: false
            },
            poster: "/static/img/ccnu1.png" //视频缩略图图
        }, function() {
            // Player (this) is initialized and ready.
            //var myPlayer = this;
            //myPlayer.play();
        });
        videojs("my-player").ready(function() {
            //var myPlayer = this;
            //myPlayer.play();
        });
        /*
        $player.on("pause", function() {
            //alert("播放器暂停事件！");    //可用
        });
        $player.on("emptied", function() {
            alert("emptied"); //当目前的播放列表为空时触发。
        });
        $player.on("playing", function() {
            alert("playing"); //当音频/视频在因缓冲而暂停或停止后已就绪时触发。
        });
        $player.on("waiting", function() {
            alert("waiting"); //当视频由于需要缓冲下一帧而停止时触发。
        });
        $player.on("abort", function() {
            alert("abort"); //当音频/视频视频终止加载时发生，该事件是在多媒体数据终止下载时触发，而不是发生错误时触发。
        });
        $player.on("pause", function() {
            alert("pause"); //当音频/视频已暂停时触发。
        });
        //已测试：可以用。当播放时关闭rtmp服务器，播放器在超时后触发error错误。
        $player.on("error", function() {
            alert("error"); //当在音频/视频加载期间发生错误时触发。
        });
        $player.on("ended", function() {
            alert("ended"); //当目前的播放列表已结束时触发。
        });
        $player.on("stalled", function() {
            alert("stalled"); //如果浏览器不能获取媒体数据。当浏览器尝试获取媒体数据，但数据不可用时触发。
        });
        $player.on("suspend", function() {
            alert("suspend"); //当浏览器刻意不获取媒体数据时触发。
        });
        $player.on("progress", function() {
            alert("progress"); //当浏览器刻意不获取媒体数据时触发。
        });
        $player.on("loadstart", function() {
            alert("loadstart"); //当浏览器开始查找音频/视频时触发。
        });
        $player.on('timeupdate', function() {
            alert(player.currentTime());
        });*/

        $(function() {
            //this.play();
            console.log("body宽度：" + $(document.body).width() + "px");
            console.log($(document).width() + "px");
            console.log("document.body.clientWidth：" + document.body.clientWidth + "px");
        });
    </script>
</body>

</html>